<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css"
	href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link href="themes/bootstrap/easyui.css" rel="stylesheet">
<link href="themes/icon.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
<script src="js/bootstrap.min.js"></script>

<style>
a:hover {
	text-decoration: none;
}

.btn {
	display: inline-block;
	margin-top: 10px;
	padding: 10px 20px;
	border-radius: 3px;
	background-color: black;
	color: #fff;
	cursor: pointer;
}

.btn {
	weith: 10px;
	font-style: normal;
}

.bgbtn span {
	margin-left: 10px;
	padding-left: 20px;
	background: url(img/edit1.png) left center no-repeat;
}

.bgbtn1 span {
	margin-left: 10px;
	padding-left: 20px;
	background: url(img/add.png) left center no-repeat;
}

.bgbtn2 span {
	margin-left: 10px;
	padding-left: 20px;
	background: url(img/cancel1.png) left center no-repeat;
}

.bgbtn3 span {
	margin-left: 10px;
	padding-left: 20px;
	background: url(img/search.png) left center no-repeat;
}

.bgbtn4 span {
	margin-left: 10px;
	padding-left: 20px;
	background: url(img/ok.png) left center no-repeat;
}

#Main {
	width: 600px;
	text-align: center;
	margin: 0 auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	margin: 10px 5px 5px 10px;
	cursor: default;
	border: 1px solid #ccc;
	margin-top: 20px;
	box-shadow: 0px 0px 10px rgba(0, 255, 255, 0.75);
	border: 1px solid rgba(127, 255, 255, 0.75);
	-webkit-box-shadow: 0px 0px 8px rgba(0, 255, 255, 0.75);
	-moz-box-shadow: 0px 0px 8px rgba(0, 255, 255, 0.75);
	box-shadow: 0px 0px 8px rgba(0, 255, 255, 0.75);
}

th {
	font-weight: 300;
	text-align: center;
	padding: 10px 0 10px 0;
	font: 16px "微软雅黑", Arial, Helvetica, sans-serif;
	background-color: rgba(0, 93, 93, 0.8);
	color: #efefef;
	text-shadow: 0px 0px 20px rgba(127, 255, 255, 1);
}

th, td {
	border: 1px solid rgba(127, 255, 255, 0.55);
}

.tbContext:hover {
	background-color: rgba(0, 99, 99, 0.9) !important;
}

tr>td {
	font: 16px "微软雅黑", Arial, Helvetica, sans-serif;
	text-align: center;
	padding: 6px 0 6px 0;
	color: rgba(127, 255, 255, 0.75);
	text-shadow: 0px 0px 20px rgba(0, 255, 255, 0.75);
	/*-webkit-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95));
    -moz-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95));
    -o-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95));
    -ms-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95));
    filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95));*/
}

.tbContext:nth-child(2n 1) {
	background-color: rgba(0, 127, 127, 0.1);
	.
	input--haruki
	{
	margin
	:
	4em
	1em
	1em;
}
</style>
<script type="text/javascript">
	$(function() {
		//$("input-11").onlyNum();
		$("#update").click(
				function() {
					var a = $("input[name='fid']:checked").length;
					if (a != 1) {
						alert('请选择一个进行修改！');
					} else {
						$("#fm").slideUp(3000);
						$("#updatefm").slideDown(3000);
						var fid = $("input[name='fid']:checked").val();
						var fname = $("input[name='fid']:checked").parent()
								.next().next().text();
						var fweight = $("input[name='fid']:checked").parent()
								.next().next().next().text();
						//alert(fid);
						$("#fid").val(fid);
						$("#input-4").val(fname);
						$("#input-5").val(fweight);
					}
				})

		$("#add").click(function() {
			//$("#addfm").slideDown("slow");
			$("#fm").slideUp(3000);
			$("#addfm").slideDown(3000);
		})
		$("#add2").click(function() {
			$("#fm").slideDown(3000);
			$("#addfm").slideUp(3000);
		})
		$("#ok2").click(function() {
			//$("#updatefm").fadeOut("slow");
			$("#fm").slideDown(3000);
			$("#updatefm").slideUp(3000);
		})
		
		$("#delete").click(function() {
			if($("input[name='fid']):checked").length!=0){
				alert("确认删除！");
				$.messager.alert('消息提示', '删除成功', 'question');
				return true;
			}else{
				$.messager.alert('消息提示', '请进行选择！', 'question');
				return false;
			}
		})

		$("#allck").click(function() {
			if (this.checked) {
				$("input[name='fid']").attr("checked", true);
			} else {
				$("input[name='fid']").attr("checked", false);
			}
			//$("select option:selected")
		})

	})
	function search() {
		var a=$('#searchname').val().length;
		if (a>10||$('#searchname').val() == "") {
			$.messager.alert('消息提示', '数据格式不对', 'error');
			return false;
		} else {
			return true;
		}
	}
	function update() {
		var a=$.isNumeric($('#input-5').val());
		var b=$('#input-4').val().length;
		if (b>10||a==false||$('#input-4').val() == "" || $('#input-5').val() == ""||Number($('#input-5').val())<0) {
			$.messager.alert('消息提示', '数据格式不对', 'error');
			return false;
		} else {
			$("#updatefm").fadeOut(4000);
			return true;
		}
	}
	function add() {
		var a=$.isNumeric($('#input-11').val());
		var b=$('#input-10').val().length;
		if (b>10||a==false||$('#input-10').val() == "" || $('#input-11').val() == ""||Number($('#input-11').val())<0) {
			$.messager.alert('消息提示', '数据格式不对', 'error');
			return false;
		} else {
			$("#addfm").fadeOut(4000);
			return true;
		}
	}
</script>
<body style="background-color: black">
	<form onsubmit="return search()" id="s" action="search" method="post">
		<input name="searchName" type="text" id="searchname"
			style="width: 300px; height: 40px; display: inline; background-color: black"
			class="form-control" placeholder="食材名" />
		<div style="display: inline;">
			<button type="submit" id="sear" class="bgbtn3 btn"
				style="display: inline;">
				<span style="color: white;">查询</span>
			</button>
		</div>
	</form>
	
	<!-- 查询表单 -->
	<form id="fm" onsubmit="return " action="deletefood" method="post">
		<table>
			<tr>
				<th><input type="checkbox" name="op" id="allck" />全选</th>
				<th>索引号</th>
				<th>食材名</th>
				<th>食材重量</th>
			</tr>
			<c:forEach items="${foods}" var="food" varStatus="fd">
				<tr>
					<td><input type="checkbox" name="fid" value="${food.foId}"></input></td>
					<td>${fd.index+1}</td>
					<td>${food.fName}</td>
					<td>${food.weight}</td>
				</tr>
			</c:forEach>
		</table>
		<a href="#" id="add" class="bgbtn1 btn"> <span>新增</span>
		</a> <a href="#" id="update" class="bgbtn btn"> <span>修改</span>
		</a>
		<button type="submit" id="delete" class="bgbtn2 btn">
			<span>删除</span>
		</button>
	<center>
		<nav class="page">
		<ul class="pagination" style="margin-top:">${page}
		</ul>
		</nav>
	</center>
	</form>
	<form onsubmit="return add()" id="addfm" action="addFood" method="post"
		style="display: none;">
		<section class="content bgcolor-7">
		<h2>增加食材信息</h2>
		<span class="input input--jiro"> <input name="fname"
			class="input__field input__field--jiro" type="text" id="input-10" />
			<label class="input__label input__label--jiro" for="input-10">
				<span class="input__label-content input__label-content--jiro">食材名</span>
		</label>
		</span> <span class="input input--jiro"> <input name="fweight"
			class="input__field input__field--jiro" type="text" id="input-11" />
			<label class="input__label input__label--jiro" for="input-11">
				<span class="input__label-content input__label-content--jiro">食材重量</span>
		</label>
		</span> </section>
		<button type="submit" id="add1" class="bgbtn4 btn"
			style="display: inline;">
			<span style="color: white;">确定</span>
		</button>
		<a id="add2" class="bgbtn4 btn"
			style="display: inline;float:right;">
			<span style="color: white;">取消</span>
		</a>
	</form>

	<form onsubmit="return update()" action="updatefm" id="updatefm"
		method="post" style="display: none">
		<section class="content">
		<h2 style="color: white">修改食材信息</h2>
		<input id="fid" name='fid' style="display: none"></input> <span
			class="input input--hoshi"> <input name="fname"
			class="input__field input__field--hoshi" type="text" id="input-4" />
			<label
			class="input__label input__label--hoshi input__label--hoshi-color-1"
			for="input-4"> <span
				class="input__label-content input__label-content--hoshi">食材名</span>
		</label>
		</span> <span class="input input--hoshi"> <input name="weight"
			class="input__field input__field--hoshi" type="text" id="input-5" />
			<label
			class="input__label input__label--hoshi input__label--hoshi-color-2"
			for="input-5"> <span
				class="input__label-content input__label-content--hoshi">食材重量</span>
		</label>
		</span> </section>
		<button type="submit" id="ok" class="bgbtn4 btn"
			style="display: inline;">
			<span style="color: white;">确定</span>
		</button>
		<button type="submit" id="ok2" class="bgbtn4 btn"
			style="display: inline;float: right;">
			<span style="color: white;">取消</span>
		</button>
	</form>
</body>
</html>